<template>
  <div>
    <el-row :gutter="6">
      <el-form ref="boxForm" :model="boxData"  size="mini" label-width="60px">
        <el-row>
          <el-col :span="4">&nbsp;<span class="el-form-item__label" style="margin-left:90px;" title="">库位类型</span></el-col>
            <el-col :span="17" style="margin-left:-55px;">
              <el-form-item label="" prop="storage">
                <el-select v-model="boxData.storage" @change="selectstorage"  placeholder="库位类型库位类型" clearable :style="{width: '100%'}">
                  <el-option
                    v-for="k in Object.keys(
                      $store.state.edit.entry.sources['storageTypeSource']
                    )"
                    :key="k"
                    :label="m($store.state.edit.entry.sources['storageTypeSource'][k])"
                    :value="k"
                  >
              </el-option>
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>

        <el-row v-show= "channelsShow" >
          <el-col :span="4">&nbsp;<span class="el-form-item__label" style="margin-left:90px;">所属渠道</span></el-col>
            <el-col :span="17" style="margin-left:-55px;">
              <el-form-item label="" prop="channels">
                <el-select v-model="boxData.channels" @change="selectchannels"  placeholder="请选择" multiple  clearable :style="{width: '100%'}">
                  <el-option
                    v-for="k in Object.keys(
                      $store.state.edit.entry.sources['parcelchannelSource']
                    )"
                    :key="k"
                    :label="m($store.state.edit.entry.sources['parcelchannelSource'][k])"
                    :value="k"
                  >
              </el-option>
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>

        <el-row v-show= "problemsShow" >
          <el-col :span="4">&nbsp;<span class="el-form-item__label" style="margin-left:80px;">问题件类型</span></el-col>
            <el-col :span="17" style="margin-left:-55px;">
              <el-form-item label="" prop="problems">
                <el-select v-model="boxData.problems" @change="selectproblems"  placeholder="请选择" multiple  clearable :style="{width: '100%'}">
                  <el-option
                    v-for="k in Object.keys(
                      $store.state.edit.entry.sources['parcelSeaairProblemTypeSource']
                    )"
                    :key="k"
                    :label="m($store.state.edit.entry.sources['parcelSeaairProblemTypeSource'][k])"
                    :value="k"
                  >
              </el-option>
                </el-select>
              </el-form-item>
            </el-col>
        </el-row>

      </el-form>
    </el-row>
  </div>
</template>
<script>
import {m} from "@/store/yg/common/local"
export default {
  components: {},
  props: [],
  data() {
    return {
      boxData: {
        storage: '',
        channels: [],
        problems:[]
      },
      channelsShow: false,
      problemsShow: false
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    //页面加载完成后执行
    this.init()
  },
  methods: {
    selectproblems(value){
        this.boxData.problems = value;
        this.$store.state.edit.row["problemTypes"] = value;
        this.$store.state.edit.row["stroagetype"] = 2 ;
    },

    selectchannels(value){
        this.boxData.channels = value;
        this.$store.state.edit.row["channelId"] = value;
        this.$store.state.edit.row["stroagetype"] = 1 ;
    },

    selectstorage(value){
       console.info(value)
       this.$store.state.edit.row["stroagetype"] = value
       console.info(this.$store.state.edit.row);

       if(value===1 || value === '1'){
          this.channelsShow = true;
          this.problemsShow = false;
          this.$store.state.edit.row["channelId"] = this.boxData.channels
      }else{
          this.problemsShow = true;
          this.channelsShow = false;
          this.$store.state.edit.row["problemTypes"] = this.boxData.problems
      }

    },
    init() {
      if (this.loaded) {
        return "";
      }

      if(this.$store.state.edit.row["stroagetype"]===1 || this.$store.state.edit.row["stroagetype"] === '1'){
          this.channelsShow = true;
          this.problemsShow = false;
          this.boxData.storage = this.$store.state.edit.row["stroagetype"]  +''
          this.boxData.channels = this.$store.state.edit.row["channelId"]
      }else if(this.$store.state.edit.row["stroagetype"]===2 || this.$store.state.edit.row["stroagetype"] === '2'){
          this.problemsShow = true;
          this.channelsShow = false;
          this.boxData.storage = this.$store.state.edit.row["stroagetype"]  +''
          this.boxData.problems = this.$store.state.edit.row["problemTypes"]
      }else{
          this.problemsShow = false;
          this.channelsShow = true;
      }
//      this.boxData.storage = this.$store.state.edit.row["stroagetype"] +''
    },

    m(k) {
      return m(k);
    },
    submitForm() {
      this.$refs['boxForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['boxForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
